{% extends "home.html" %}
{% block less %}
<link rel="stylesheet/less" type="text/css" href="/assets/less/user_page.less">
{% endblock %}
{% block author %}
<div class="control-panel-btn"><img src="/assets/img/control-panel-closebutton.png" />
</div>
<div class="author">
    <div class="author-info">
        <img src="http://lorempixel.com/200/200/people" class="img-polaroid pull-left profile-img"/>
        <div class="authorname pull-left">
            <b id="author-name">{{ author|username }}</b>
            <br/>
            {% if author.id == user.id%}
            <button class="btn btn-success" id="edit-author">
                <i class="icon-pencil icon-white"></i> Edit
            </button>
            {% else %}
            <button class="btn" id="follow-author">
                <i class="icon-star"></i> Follow
            </button>
            {% endif %}
        </div>
        <div style="clear: both;"></div>
    </div>
    <div style="clear: both;"></div>
    <div class="author-status">
        <b>About me</b>
        <span id="author-status">{{ author.get('about_me')|nl2br }}</span>
    </div>
    <div class="author-boards">
        <div>
            <b style="margin-left:10px;">Bang Tin</b>
            {% if author.id == user.id%}
            <a href="#" class="btn btn-success pull-right" id="new-board" style="margin:0px 10px 5px 0px;"><i class="icon-plus icon-white"></i></a>
            <div style="clear:both;"></div>
            {% endif %}
            <ul class="menu">
                {% for board in user_boards %}
                <li id="board-{{board.key.id()}}">
                    <div>
                        <a class="pull-left" href="/user/{{author.id}}/?board_id={{ board.key.id() }}"><i class="icon-book"></i> {{ board.name}}</a>
                        {% if author.id != user.id%}
                        <button class="btn pull-right" id="follow-board">
                            <i class="icon-star"></i>
                        </button>
                        {% endif %}
                        <div style="clear: both;"></div>
                    </div>

                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
{% endblock %}

{% block extra_tpl %}
<script type="text/template" id="edit-author-tpl">
    {% include 'edit-author-tpl.html' %}
</script>
<script type="text/template" id="edit-board-tpl">
    {% include 'edit-board-tpl.html' %}
</script>

{% endblock %}

{% block js_data %}
<script type="text/javascript">
    //<![CDATA[
    SB.author = new SB.User();
    SB.author.set({{author_json}});
    SB.boardCollection = new Backbone.Collection();
    SB.boardCollection.reset({{boards_json}});
    SB.followeeCollection = new Backbone.Collection();
    SB.followeeCollection.reset({{followees_json}});
    
    //]]
</script>

{% endblock %}

{% block extra_js %}
<script src="/assets/js/app/home.js"></script>
<script src="/assets/js/app/user_page.js"></script>
{% endblock %}